<template>
	<view class="page">
		<free-nav-bar title="聊天信息" :fixed="false" :showback="true" :showright="false" @openExtend="openExtends">
		</free-nav-bar>

		<view class="flex flex-wrap py-3 bg-white">
			<!-- 单聊 -->
			<view v-if="detail.chat_type === 'user'" class="flex flex-column align-center justify-center mb-2" style="width: 150rpx;">
				<free-avater size="110"
					:src="detail.avatar?detail.avatar:'https://profile-avatar.csdnimg.cn/3365568353cd44c2acf217ab8b6345f9_weixin_47365777.jpg!1'">
				</free-avater>
				<text class="font-md text-muted">{{detail.name}}</text>
			</view>
			<!-- 群聊 -->
			<view v-else class="flex flex-column align-center justify-center mb-2" style="width: 150rpx;">
				<free-avater size="110" 
					:src="detail.avatar?detail.avatar:'https://profile-avatar.csdnimg.cn/3365568353cd44c2acf217ab8b6345f9_weixin_47365777.jpg!1'">
				</free-avater>
				<text class="font-md text-muted">{{detail.name}}</text>
			</view>
			<view class="flex flex-column align-center justify-center mb-2" style="width: 150rpx;">
				<view class="flex justify-center align-center border " hover-class="bg-light"
					style="width: 120rpx;height: 120rpx;">
					<text class="text-light-muted" style="font-size: 100rpx;">+</text>

				</view>
			</view>
		</view>
		<free-divider v-if="detail.chat_type === 'group'"></free-divider>
		<free-list-item v-if="detail.chat_type === 'group'" title="群聊名称" showright isshowjt>
			<text slot="right" class="font text-muted">群聊名称</text>
		</free-list-item>
		<free-list-item v-if="detail.chat_type === 'group'" title="群二维码" showright isshowjt>
			<text class="iconfont font-md text-light-muted" slot="right">&#xe647;</text>
		</free-list-item>
		<free-list-item v-if="detail.chat_type === 'group'" title="群公告" showright isshowjt></free-list-item>
		<free-divider></free-divider>
		<free-list-item title="查找聊天记录" showright isshowjt></free-list-item>
		<free-divider></free-divider>
		<free-list-item title="消息免打扰" showright :isshowjt="false">
			<switch :checked="detail.nowarn" @change="" slot="right" />
		</free-list-item>
		<free-list-item title="置顶聊天" showright :isshowjt="false">
			<switch :checked="detail.istop" @change="" slot="right" />
		</free-list-item>
		<free-list-item title="强提醒" showright :isshowjt="false">
			<switch :checked="detail.strongwarn" @change="" slot="right" />
		</free-list-item>
		<free-divider v-if="detail.chat_type === 'group'"></free-divider>
		<free-list-item v-if="detail.chat_type === 'group'" title="我在本群的昵称" showright isshowjt>
			<text slot="right" class="font text-muted">亚刻</text>
		</free-list-item>
		<free-list-item v-if="detail.chat_type === 'group'" title="显示群成员的昵称" showright isshowjt>
			<switch checked="false" @change="" slot="right" />
		</free-list-item>
		<free-divider></free-divider>
		<free-list-item title="清空聊天记录" showright isshowjt></free-list-item>
		<free-divider></free-divider>
		<free-list-item title="投诉" showright isshowjt></free-list-item>
		<free-divider></free-divider>
		<view class="py-3 flex align-center justify-center bg-white" hover-class="bg-light">
			<text class="font text-danger">删除并退出</text>
			
		</view>
	</view>
</template>

<script>
	import freeListItem from "@/components/free-ui/free-list-item.vue"
	import freeDivider from "@/components/free-ui/free-divider.vue"
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
	import freeAvater from "@/components/free-ui/free-avater.vue"
	import {mapState} from "vuex"
	export default {
		components: {
			freeNavBar,
			freeAvater,
			freeDivider,
			freeListItem
		},
		onLoad(e) {
			console.log(e,"e");
			if (!e.params) {
				uni.showToast({
					title: "非法参数",
					icon: "none"
				})
				uni.navigateBack({
					delta: 1
				})
			}
			let detail=JSON.parse(e.params)

			detail=this.chat.getchatListItem(detail.id,detail.chat_type)
			if(!detail){
				return uni.navigateBack({
					delta: 1
				})
			}
			this.detail=detail
			console.log(this.detail,"detail");
		},
		computed:{
			...mapState({
				chat:state=>state.user.chat
			})
		},
		data(){
			return{
				detail:{}
			}
		}
	}
</script>

<style>
</style>
